<template>
  <div>
    <h1>人员分布图</h1>
    <div id="indoor-map"
         style="width:100%;height:80vh;position:relative;margin:20px 0px 0px 0px;border:1px solid black;"></div>
    <el-row :gutter="10">
      <el-col :span="3">
        <el-switch v-model="isXMap3D"
                   active-text="3D"
                   inactive-text="2D">
        </el-switch>
      </el-col>
      <el-col :span="6">
        <el-switch v-model="isXMapShowNames"
                   active-text="显示名称"
                   inactive-text="隐藏名称">
        </el-switch>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as XMap from '../libs/xmap.module.js'
export default {
  name: 'DistributionMap',
  data () {
    return {
      isXMap3D: false,
      isXMapShowNames: false,
    }
  },
  mounted () {
    var map = new XMap.Map('#indoor-map', {
      viewMode: XMap.ViewMode.MODE_2D,
      // showAllFloors: true,
      showNames: this.isXMapShowNames,
      // showPubPoints: false,
    })
    this.map = map
    map.load('./test1.json')
    map.loadTheme('light', 'theme/light.json').then(() => map.setTheme('light'))

    let roomInfo = [
      { floor: 'F1', x: -1130, y: 600, rows: 2, cols: 6 },
      { floor: 'F1', x: -910, y: 600, rows: 2, cols: 8 },
      { floor: 'F1', x: -640, y: 600, rows: 2, cols: 7 },
      { floor: 'F1', x: -400, y: 600, rows: 2, cols: 8 },
      { floor: 'F1', x: -100, y: 600, rows: 2, cols: 7 },
      { floor: 'F1', x: 160, y: 600, rows: 2, cols: 8 },

      { floor: 'F1', x: -1130, y: 65, rows: 4, cols: 10 },
      { floor: 'F1', x: -760, y: 65, rows: 3, cols: 13 },
      { floor: 'F1', x: -270, y: 65, rows: 5, cols: 13 },
      { floor: 'F1', x: 170, y: 65, rows: 6, cols: 8 },

      { floor: 'F2', x: -1130, y: 600, rows: 6, cols: 15 },
      { floor: 'F2', x: -640, y: 600, rows: 5, cols: 13 },
      { floor: 'F2', x: -120, y: 600, rows: 3, cols: 15 },
    ]
    for (let info of roomInfo) {
      for (let i = 0; i < info.rows; i++) {
        for (let j = 0; j < info.cols; j++) {
          this.addMarkPoint(
            info.floor,
            info.x + 25 * j,
            info.y - 25 * i,
            j % 2 == 0 ? 'lime' : 'red'
          )
        }
      }
    }
  },
  watch: {
    isXMap3D (val) {
      if (val) {
        this.map.setViewMode(XMap.ViewMode.MODE_3D)
      } else {
        this.map.setViewMode(XMap.ViewMode.MODE_2D)
      }
    },
    isXMapShowNames (val) {
      this.map.showNames = val
    },
  },
  methods: {
    addMarkPoint (floor, x, y, color) {
      var circle = new XMap.Polygon({
        color: color,
        alpha: 1.0,
        lineColor: color,
        lineWidth: 0,
        floor: floor,
        points: {
          type: 'circle',
          center: { x: x, y: y },
          radius: 10,
          //segments: 50,
        },
      })
      let location = new XMap.Location(floor, 0, 0)
      let infoWindow = new XMap.HTMLInfoWindow(location, {
        content: "<div>it's an info window</div>",
      })

      let infoContent =
        color == 'red'
          ? '<div>姓名:wk<br/>学号:123456<br/>发烧</div>'
          : '<div>姓名:wk<br/>学号:123456<br/>正常</div>'

      circle.on('hover', (e) => {
        if (e.hovered) {
          infoWindow.setLocation(circle.location)
          infoWindow.setOptions({
            offset: { x: 10, y: -10 },
            content: infoContent,
          })
          this.map.addOverlay(infoWindow)
        } else {
          this.map.removeOverlay(infoWindow)
        }
      })
      this.map.addOverlay(circle)
    },
  },
}
</script>

<style scoped>
h1 {
  font-size: 30px;
  color: #333;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 5px;
  border-bottom: 2px solid #409eff;
  width: 220px;
}
</style>
